<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			*{
				margin: 0;
				padding: 0;
			}
			body{
				background-image: url(img/bgi.jpg);
				font-family: "宋体";
				font-size: 30px;
				position: relative;
			}
			.nav {
				width: 500px;
				position: absolute;
				left: 270px;
				top: 30px;
				list-style-type: none;
				background-color: orange;
				font-weight: bolder;
			}
			.nav li{
				padding: 10px;
			}
			
			.nav a {
				display: block;
				line-height: 40px;
				text-decoration: none;
				border: 1px solid #486B02;
				box-shadow: -2px -2px 5px #486B02;
				color: white;
				padding: 10px 30px;
				transition: all 0.3s linear;
			}
			
			.nav a:hover,
			.nav a:active {
				background-color: white;
				color: orange;
			}
			
		</style>
	</head>

	<body>
		<ul class="nav">
			<li>
				<a href="https://www.baidu.com/">百度一下</a>
			</li>
			<li>
				<a href="https://www.sina.com.cn/">新浪</a>
			</li>
			<li>
				<a href="https://www.ifeng.com/">凤凰网</a>
			</li>
			<li>
				<a href="https://www.163.com/">网易</a>
			</li>
			<li>
				<a href="https://www.qq.com/">腾讯</a>
			</li>
			<li>
				<a href="http://www.sohu.com/">搜狐</a>
			</li>
		</ul>

	</body>

</html>